﻿<link href="/Modules/NineSeas.Dashboard/Styles/books.summary.min.css" rel="stylesheet" type="text/css">
<div class="search-container" ng-controller="BooksController">
    <form class="form-inline" role="form">
        <div class="form-group">
            <input type="text" class="form-control" id="expression" placeholder="Search for your books..." ng-model="search.Expression"/>
        </div>
        <div class="form-group">
            <div class="btn-group">
                <button class="btn btn-primary" ng-click="doSearch()" t="Search">Search</button>
                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li ng-repeat="(key, value) in orderOptions" class="{{((key == '' && !search.OrderBy) || search.OrderBy == key) && 'active' || ''}}"><a href="javascript:;" ng-click="setOrder(key)">{{value}}</a></li>
                    <li class="divider"></li>
                    <li ng-repeat="(key, value) in orderDirections" class="{{search.OrderDirection == key && 'active' || ''}}"><a href="javascript:;" ng-click="setOrderDirection(key)">{{value}}</a></li>
                </ul>
            </div>
        </div>
    </form>
    <div ng-show="showPaging">
        <pagination rotate="false" 
            num-pages="paging.TotalPages" 
            current-page="paging.Page" 
            max-size="paging.PageSize" 
            class="pagination-small" 
            boundary-links="true"
            on-select-page="pageChanged(page)"></pagination>
    </div>
    <div class="search-result">
        <div ng-repeat="book in books" class="book-item">
            <div class="book-leftPane">
                <a href="/Book/{{book.NameOnUrl}}">
                    <img ng-src="{{book.ImageUrl || '/Modules/NineSeas/Images/placeholder-book.png'}}" alt="{{book.Name}}" class="book-image"/>
                </a>
            </div>
            <div class="book-rightPane">
                <div class="book-rightPane-header">   
                    <div class="book-lastUpdatedDate"><span t="Last Updated">Last Updated</span> {{book.LastUpdatedDate}}</div>
                </div>
                <div class="book-rightPane-content">      
                    <div class="book-name">
                        <a href="/Book/{{book.NameOnUrl}}">{{book.Name}}</a>
                    </div>
                    <div style="clear:right;"></div>
                    <div class="book-categories"><span ng-repeat="category in book.selectedCategories" data-id="{{category.Id}}">{{category.Name}}</span></div>
                    <div class="book-author" data-id="book.AuthorId"></div>
                    <div class="book-introduction" ng-bind-html="book.Introduction"></div>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="book-footer">
                <div class="book-commands">
                    <a href="/Dashboard/Book/Edit/{{book.Id}}" title="Edit" t="Edit" class="btn btn-info">Edit</a>
                    <a href="/Dashboard/Book/{{book.Id}}/Chapter" title="Chapters" class="btn btn-info">{{book.ChapterCount}} Chapter(s)</a>
                    <a href="javascript:;" class="btn btn-danger delete-command" t="Delete">Delete</a>
                </div>
                <div class="tags">
                    <a ng-repeat="tag in book.Tags" href="/Tags/{{tag}}"><i class="glyphicon glyphicon-tag"></i> {{tag}}</a>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div ng-show="showPaging">
        <pagination rotate="false" 
            num-pages="paging.TotalPages" 
            current-page="paging.Page" 
            max-size="paging.PageSize" 
            class="pagination-small" 
            boundary-links="true"
            on-select-page="pageChanged(page)"></pagination>
    </div>
</div>